<template>
  <van-nav-bar
    title="登录"
    right-text="去注册"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <div style="text-align: center">
    <van-icon class="icon" name="manager-o" size="24px" />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px 0">
      <van-button
        round
        block
        @click="loginFn"
        type="primary"
        native-type="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
  <button @click="img">获取</button>
</template>
<script setup>
import { ref, reactive, toRefs } from "vue";
// import axios from "axios";
import { showToast } from "vant";
import { login } from "@/api/user";
import { useRouter } from "vue-router";
import userUserStore from "@/stores/user";

const router = useRouter();
const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push({
    name: "sign",
  });
};

const username = ref("");
const password = ref("");

let num = 60;
let disabled = ref(false);
let text = ref("发送验证码");
let time = null;

const Router = useRouter();
const { saveInf, saveUid, saveToken, saveIslogin } = userUserStore();

function loginFn() {
  login({
    username: username.value,
    password: password.value,
  }).then((res) => {
    console.log(res);
    if (res.code == 0) {
      showToast({
        message: res.msg,
        icon: "success",
      });
      let { uid, token, userInfo, tokenExpired } = res;
      localStorage.setItem("uid", uid);
      localStorage.setItem("token", token);
      localStorage.setItem("tokenExpired", tokenExpired);
      localStorage.setItem("userInfo", JSON.stringify(userInfo));
      console.log(res);
      Router.push("/");
      // saveInf, saveUid, saveToken, saveIslogin;
      saveInf(userInfo);
      saveUid(uid);
      saveToken(token);
      saveIslogin(true);
    } else {
      showToast({
        message: res.data.msg,
        icon: "cross",
      });
    }
  });
}

function img() {
  axios({
    url: "https://api.uomg.com/api/comments.163",
    method: "post",
    data: {
      mid: "10",
      format: "",
    },
  }).then((res) => {
    console.log(res);
  });
}
</script>
<style>
.icon {
  padding: 40px;
  background-color: #dddddd;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 50px;
}

.log-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-top div:nth-child(2) {
  margin-left: 30px;
}

.van-cell-group--inset {
  margin: 0;
}
</style>
